<template>
  <div>
    <!-- header 头-->
    <van-nav-bar title="申请领养" left-arrow @click-left="onClickLeft" />
    <!-- 广播 -->
    <van-notice-bar left-icon="volume-o" text="个人信息仅用于审核" />

    <!-- 定宽 -->
    <div class="pet">
      <!-- 身份证姓名 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>姓名</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="请填写真实姓名"
        v-model="idCardName"
      />

      <!-- 身份证号 -->
      <!-- <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>身份证号</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="请填写身份证号"
        v-model="idCard"
      /> -->

      <!-- 寄养地址 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>寄养地址</span>
      </div>
      <!-- 地区选择 -->
      <div>
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <!-- <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="areaList"
            @close="show = false"
            @finish="onFinish"
          /> -->
          <van-area title="标题" :area-list="areaList" @confirm="onConfirm" />
        </van-popup>
      </div>

      <!-- 详细地址 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>详细地址</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="请填写详细地址，精确到门牌号"
        v-model="adress"
      />

      <!--  -->
      <van-button class="pet-next" block @click="submit">提交</van-button>
    </div>
    <br />
  </div>
</template>

<script>
import { checkNull } from "@/utils/checkUtil.js";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      show: false,
      fieldValue: "",
      idCardName: "",
      idCard: "",
      adress: "",
      areaList,
      //   // 选项列表，children 代表子选项，支持多级嵌套
      //   options: [
      //   {
      //     text: "广东省",
      //     value: "1",
      //     children: [
      //       {
      //           text: "深圳市",
      //           value: "101",
      //           children: [
      //               { text: "南山区", value: "10101" },
      //               { text: "宝安区", value: "10102" },
      //               { text: "龙华区", value: "10103" },
      //               { text: "福田区", value: "10104" },
      //           ]
      //       },
      //       { text: "广州市", value: "102" },
      //       { text: "珠海市", value: "103" },
      //       { text: "东莞市", value: "104" },
      //       { text: "佛山市", value: "105" },
      //     ],
      //   },
      //   {
      //     text: "广西壮族自治区",
      //     value: "2",
      //     children: [
      //       { text: "南宁市", value: "201" },
      //       { text: "北海市", value: "202" },
      //       { text: "桂林市", value: "203" },
      //     ],
      //   },
      // ],
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 全部选项选择完毕后，会触发 finish 事件
    // onFinish({ selectedOptions }) {
    //   this.show = false;
    //   this.fieldValue = selectedOptions.map((option) => option. 
    onConfirm(areaList) {
      let areaField = "";
      areaList.forEach((item) => {
        areaField += item.name + "-";
      });
      this.fieldValue = areaField.substring(0, areaField.length - 1);
      this.show = false;
    },
    submit() {
      checkNull(this.idCardName, "请输入正确的姓名")
        .then(() => checkNull(this.fieldValue, "请输入正确的地址"))
        .then(() => checkNull(this.adress, "请输入正确的地址"))
        .then(() => {
            let fosterMsg = {
              "type": sessionStorage.getItem('type'),
              "overviewPic": sessionStorage.getItem('overviewPic'),
              "previewPic": sessionStorage.getItem('previewPic'),
              "phone": sessionStorage.getItem('phone'),
              "wechat": sessionStorage.getItem('wechat',  ),
              "fosterCareName": sessionStorage.getItem('fosterCareName'),
              "rates": sessionStorage.getItem('rates'),
              "area": sessionStorage.getItem('area'),
              "supplies": sessionStorage.getItem('supplies'),
              "tag": sessionStorage.getItem('tag'),
            }
            this.axios.post('client/addFosterCare', fosterMsg).then(res => {
              if(res.code == 200){
                this.$toast({message:'申请领养数据已提交'})
              }
            })
        })
        .catch((err)=>{
          this.$toast(err)
        });
        this.$toast({message:'申请领养数据已提交',duration:2000})
        this.$router.push('/foster')
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  position: relative;
  top: -0.8vw;
}
::v-deep .van-button {
  color: #999;
  font-size: 12px;
}
::-webkit-input-placeholder {
  /*Webkit browsers*/
  color: #999;
  font-size: 12px;
}
::v-deep .van-icon-arrow-left:before {
  color: #c0c0c0;
}

::v-deep .van-notice-bar {
  background-color: #fff;
}

::v-deep .van-cell {
  background-color: #eeeeee;
  border-radius: 10px;
}
.pet {
  width: 92%;
  margin: 0 auto;

  .pet-type {
    margin: 20px 0;

    span {
      display: inline-block;
      font-weight: 800;
    }
  }
  .pet-select {
    width: 100%;
    border-radius: 10px;
    background-color: #eeeeee;
    // font-size: 18px;
  }
  .pet-input {
    width: 100%;
    height: 43px;
    display: inline-block;
    background-color: #eeeeee;
    border-radius: 10px;
    text-align: center;
    border: 0px;
    font-size: 14px;
  }

  .pet-next {
    border-radius: 20px;
    background-color: #f8e176;
    margin: 40px 0 40px 0;
    color: white;
  }
}
</style>